<template>
  <span class="sort-indicator">
    <span
      v-if="showActive"
      class="arrow"
      :class="{ 'asc': order === 'asc', 'desc': order === 'desc' }"
    >
      ▼
    </span>
    <span
      v-else
      class="arrow inactive"
    >
      ▲▼
    </span>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  field: string
  current: string
  order: 'asc' | 'desc'
}>()

const showActive = computed(() => props.field === props.current)
</script>

<style scoped>
.sort-indicator {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
}

.arrow {
  position: absolute;
  font-size: 0.8em;
  color: #4285f4;
  transition: transform 0.2s;
}

.inactive {
  color: #999;
  opacity: 0.6;
}

.asc {
  transform: rotate(180deg);
}

.desc {
  transform: rotate(0deg);
}

/* Chrome样式的双箭头微调 */
.inactive::after {
  content: "▲▼";
  position: absolute;
  left: 0;
  top: -0.2em;
  font-size: 0.7em;
  letter-spacing: -0.1em;
}
</style>